/**Created by liaoyingchao on 2019-07-19.*/

<template>
  <div class="app-info">
    <div class="title-row">
      <div class="title">{{appInfo.name}}</div>
    </div>
    <div class="apps">
      <div class="info" v-if="isIos && appInfo.IOSPath" @click="openFir">
        <div class="icon">
          <img :src="appInfo.IOSIconUrl">
        </div>
        <div class="text line-bottom">
          <div class="name">{{appInfo.IOSName}} <span class="genxin" v-if="getHasGenxin()">有更新</span></div>
          <div class="sub-info">
            <span>{{appInfo.IOSVersion}}</span>
            <span :class="timeWarning(appInfo.IOSUpdateTime)">{{getTimeStr(appInfo.IOSUpdateTime)}}</span>
          </div>
        </div>
      </div>
      <div class="info" v-if="isAndrid() && appInfo.AndroidPath" @click="openFir">
        <div class="icon">
          <img :src="appInfo.AndroidIconUrl">
        </div>
        <div class="text line-bottom">
          <div class="name">{{appInfo.AndroidName}} <span class="genxin" v-if="getHasGenxin()">有更新</span></div>
          <div class="sub-info">
            <span>{{appInfo.AndroidVersion}}</span>
            <span :class="timeWarning(appInfo.AndroidUpdateTime)">{{getTimeStr(appInfo.AndroidUpdateTime)}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'

  export default {
    name: "app-info",
    components: {},
    props: ['appInfo'],
    data() {
      return {}
    },
    methods: {
      openFir: function () {
        let url = '';
        let time = new Date().getTime();
        if (this.isIos()) {
          url = this.appInfo.IOSPath
        } else {
          url = this.appInfo.AndroidPath
        }
        if (url) {
          window.localStorage.setItem(this.appInfo.name, time);
          window.location.href = url;
        }
      },
      timeWarning: function (time) {
        if (parseInt(time) + 60*24*3600*1000 < (new Date()).getTime()) {
          return 'warning-2'
        } else if (parseInt(time) + 20*24*3600*1000 < (new Date()).getTime()) {
          return 'warning-1'
        }
        return ''
      },
      getTimeStr: function (time) {
        return tools.getTimeStr(time);
      },
      isIos: function () {
        // return true;
        return tools.isIos()
      },
      isAndrid: function () {
        // return true;
        return tools.isAndrid()
      },
      getHasGenxin: function () {
        let time;
        if (this.isIos()) {
          time = this.appInfo.IOSUpdateTime
        } else {
          time = this.appInfo.AndroidUpdateTime
        }
        let localTime = window.localStorage.getItem(this.appInfo.name);
        if (localTime && time > localTime) {
          return true;
        }
        return false;
      }
    },
    created() {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped type="text/stylus">
  .app-info {
    overflow hidden
    padding 5px 12px;
    .title-row {
      padding-top 8px;
      font-size 15px;
      font-weight 500;
    }
    .apps {
      .info {
        padding-top 10px;
        display flex;
        align-items center;
        .icon {
          img {
            display block;
            width 60px;
            height 60px;
          }
        }
        .text {
          height 60px;
          flex 1;
          margin-left 8px;
          font-size 12px;
          color #666;
          .name {
            font-size 13px;
            color black;
            padding 5px 0 12px;
            .genxin {
              margin-left 20px;
              font-size 10px;
              padding 2px 10px;
              border-radius 10px;
              background-color lightgreen;
              color green;
            }
          }
          .sub-info {
            display flex;
            align-items center;
            justify-content space-between;
            .warning-1 {
              color #ffc50e;
            }
            .warning-2 {
              color red;
            }
          }
        }
      }
    }
  }
</style>